<template>
  <div class="col-md-8">
    <h3 class="reply">评论回复：</h3>
    <!-- <h2>暂无评论，点击左侧添加评论！！！</h2> -->
    <ul class="list-group">
      <CommentItem v-for="(comment,index) in commentLists" 
      :key="comment.id" 
      :comment="comment"
      :index="index"
      @delCommentItem="delCommentItem" />
    </ul>
  </div>
</template>
<script>
import CommentItem from "../CommentItem"
export default {
  name: "CommentList",
  components: {
    CommentItem,
  },
  data() { 
    return {
      commentLists: [
        {id:1, userName:"唐僧",content:"取经路上好无聊的说"},
        {id:2, userName:"悟空",content:"要不带你去女儿国转转?"},
      ]
    }
  },
  methods: {
    addComment(userName,content) { 
      this.commentLists.push({
        id: Date.now(),
        userName,
        content
      });
    },
    delCommentItem(index) { 
      this.commentLists.splice(index, 1);
    }
  },
  mounted() { 
    this.$bus.$on("addComment",this.addComment);
  },
  beforeDestroy() { 
    this.$bus.$off("addComment",this.addComment);
  }
}
</script>
<style>
 .reply {
   margin-top: 0px;
 }
</style>